<!---->
<template>
    <div class="backgroundDiv">
        <el-row :gutter="20">
            <el-col :span="6">
                当前登录用户： {{username}}
            </el-col>

            <el-col :span="6">
                <el-button type="primary" @click="reset">修改密码</el-button>
            </el-col>
            <el-col :span="6">
                <el-button type="warning" @click="logout">退出登录</el-button>
            </el-col>
            <el-col :span="6">
                <el-button type="danger" v-if="store.getters.getStatus && store.getters.getIsTeacher!=2" @click="signOut">注销账户</el-button>
            </el-col>
        </el-row>
    </div>


</template>

<script setup>
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'
    import {ElMessage, ElMessageBox} from "element-plus";
    import {signOutUser} from "@/api/user";
    import {socket} from '@/utils/webSocket'

    const store = useStore();
    const router = useRouter();
    const username = store.getters.getUsername;
    // const teacherUsername = store.getters.getTeacherUsername;

    const logout = ()=>{
        // store.commit("saveStatus",false);
        // store.commit("saveTeacherStatus",false);
        store.commit("resetUser");
        socket.websocketOnClose();
        // store.commit("resetTeacher");
        router.push({path:"/"})
    }
    const signOut = ()=>{
        ElMessageBox.confirm(
            '是否要注销账户，账户注销后一切损失将自负',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                signOutUser(store.getters.getId).then((res)=>{
                    store.commit("resetUser");
                    socket.websocketOnClose();
                    router.push({path: '/'})
                })
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消操作',
                })
            })
    }

    const reset = ()=>{
        store.commit("resetUser");
        // store.commit("resetTeacher");
        router.push({path:'/resetPassword'})
    }


</script>

<style scoped>
    .backgroundDiv{
        background-color: white;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
</style>